// 轮播图
var container1 = new Swiper(".container1", {
      loop: true,
      autoplay: true,
      effect: "coverflow",
      navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
      },
      pagination: {
            el: ".swiper-pagination",
            clickable: true,
            bulletActiveClass: 'active',
      }
});

// 分页器
var bullets = container1.pagination.bullets;
for (var i = 0; i < bullets.length; i++) {
      bullets[i].onmouseover = function () {
            this.click();
      }
}


var yh = document.getElementById('yh')
var denglu = document.querySelector('.denglu')
yh.onclick = function () {
      denglu.classList.add('denglu2')

}

// 登陆
var denglu_btn = document.getElementById('denglu_btn')
var username = document.getElementById('username')
var password = document.getElementById('password')
// console.log(denglu_btn)

denglu_btn.onclick = function () {
      let options = {
            url: 'http://127.0.0.1:8888/users/login',
            type: 'post',
            data: {
                  username: username.value,
                  password: password.value
            },
            dataType: 'json'
      }
      $.ajax(options).done(function (data) {
            switch (data.code) {
                  case 0:
                        alert(data.message)
                        break;
                  case 1:
                        alert(data.message)
                        setTimeout(function () {
                              // location.href = "./index.html"
                              denglu.style.display = 'none'
                        }, 2000)

                        // 登陆成功后获取储存用的id
                        setCookie('userid', data.user.id)
                        setCookie('token', data.token, {
                              expires: 1
                        })
                        xuanran(data);

            }
      })
}



//渲染用户信息
var yhxx = document.querySelector('.yhxx')
function xuanran(data) {
      yhxx.innerHTML = `${data.user.nickname}`;
}




// 立即注册
var lijizc = document.querySelector('.lijizc')
// console.log(lijizc)
lijizc.onclick = function () {
      denglu.style.display = 'none'
      zhuce.style.display = 'block'
}


// 注册
var zhuce = document.querySelector('.zhuce')

var btn_zc = document.querySelector('.btn_zc')
var username_zc = document.getElementById('username_zc')
var password_zc = document.getElementById('password_zc')
var rpassword_zc = document.getElementById('rpassword_zc')
var nickname_zc = document.getElementById('nickname_zc')

btn_zc.onclick = function () {
      // console.log(btn)
      let options = {
            url: 'http://127.0.0.1:8888/users/register',
            type: 'POST',
            data: {
                  username: username_zc.value,
                  password: password_zc.value,
                  rpassword: rpassword_zc.value,
                  nickname: nickname_zc.value
            },
            dataType: "json"
      }
      $.ajax(options).done(function (data) {
            if (data.code === 1) {
                  alert('注册成功');
                  console.log(data)
                  setTimeout(function () {
                        //     location.href = './index.html'
                        zhuce.style.display = 'none'
                        denglu.style.display = 'block'

                  }, 2000)
            } else {
                  alert(data.message)
            }
      })
}

// 登陆，注册的返回首页
var Return_dl = document.querySelector('.Return_dl')
Return_dl.onclick = function () {
      denglu.style.display = 'none'
      window.location.href = window.location.href = './index.html'

}
var Return_zc = document.querySelector('.Return_zc')
Return_zc.onclick = function () {
      zhuce.style.display = 'none'
      window.location.href = window.location.href = './index.html'

}


// 跳转到商品页面
var commodity = document.getElementById('commodity')
commodity.onclick = function () {
      var userid = getCookie('userid')
      var token = getCookie('token')
      if (userid && token) {
            location.href = './commodity.html'
      }
}


//达人搭配
for (let i = 0; i < $('.tab_ul li').length; i++) {
      $($('.tab_ul li')[i]).mouseover(function () {
            let num = i * 306
            $($('.tab_div .info')[i]).css('display', 'block')
            $('.tab_slider_img').css('left', `${num}px`)
      })
}
for (let i = 0; i < $('.tab_ul li').length; i++) {
      $($('.tab_ul li')[i]).mouseout(function () {
            $($('.tab_div .info')[i]).css('display', 'none')
      })
}



// 瀑布流
$(document).ready(function () {
      let options = {
            url: 'http://127.0.0.1:8888/proxy/dt',
            type: 'get',
            data: {
                  // include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,like_id,sender,album,reply_count,favorite_blog_id",
                  // filter_id: "家居",
                  // start: 48,
                  kw: "家居",
                  type: "feed",
                  include_fields: " top_comments,is_root,source_link,item,buyable,root_id,status,like_count,like_id,sender,album,reply_count,favorite_blog_id",
                  start: 10
            },
            dataType: 'json'
      }
      $.ajax(options)
            .done(function (data) {
                  // console.log(data)
                  render(data.data.object_list);
                  sort();
                  // 只有在渲染页面之后，才可以获取到图片给图片添加懒加载效果; 
                  $(".lazy").lazyload();
            })


      function render(list) {
            $('#Waterfall').html(list.map(
                  item =>
                        `
                        <div class="box" >
                              <img class="lazy" height=${item.photo.height / item.photo.width * 235} data-original=${item.photo.path}>
                        </div>
                  `
            ).join(""));
      }

      // 瀑布流排序 : 
      function sort() {
            let $box = $(".box")
            // 分割 : 第一行的元素和其他的元素; 
            // 存储瀑布流每一列的高度; 
            let height_array = [];
            let offset_array = [];
            $.each($box, function (index, ele) {
                  // 区分第一行的元素; 
                  if (index < 4) {
                        height_array.push($(ele).outerHeight());
                        // 记录每个元素的left值; 
                        // - 参照物应该是外部的定位元素; 
                        offset_array.push($(ele).position().left);
                  } else {
                        // 其余等待排列的元素
                        // 在数组之中取得最小值高度; 
                        let min_height = Math.min.apply(false, height_array);
                        // 取出offset_array 之中和最小高度下标相同位置的left值，并把这个left值赋值给当前的元素;
                        let min_index = height_array.indexOf(min_height);
                        let _left = offset_array[min_index]

                        // 把剩余等待排列的元素放到最小高度元素的下面; 
                        $(ele).css({
                              position: "absolute",
                              top: min_height,
                              left: _left
                        });

                        // 记录当前拼接好的数据， 给height_array 增加的高度; 
                        height_array[min_index] += $(ele).outerHeight();
                  }
            })
            // console.log( height_array );
            // 获取最大高度
            // console.log(Math.max.apply(false, height_array))
            //      把最大高度给外面的盒子
            $('#Waterfall').css({
                  height: Math.max.apply(false, height_array)
            })
      }
})


// 楼梯
var top_list = []
var $content = $(".content")
// console.log($content)
// console.log($content.offset().top )
$.each($content, function (index, ele) {
      top_list.push($(ele).offset().top)
})
console.log(top_list)

$('.stairs li').click(function () {
      let _index = $(this).index()
      $("html,body")
            .animate({
                  scrollTop: top_list[_index]
            })
})

$('#hd').click(function () {
      $("html,body")
            .animate({
                  scrollTop: 0
            })
})

// console.log($('.stairs li'))




// 注销登陆
// console.log($('.zhuxiao'))
$('.zhuxiao').click(function () {
      var userid = getCookie('userid')
      var token = getCookie('token')
      if (userid && token) {
            logoutUser(userid, token)
      }
      function logoutUser(id, token) {
            let options = {
                  url: 'http://127.0.0.1:8888/users/logout/' + id,
                  type: 'get',
                  headers: {
                        authorization: token
                  },
                  dataType: 'json'
            }
            $.ajax(options).done(function (data) {
                  console.log(data)
                  if (data.code === 1) {
                        removeCookie('userid')
                        removeCookie('token')
                        location.reload()
                  }
            })
      }
})